<template>
  <div class="main">
    <div class="video-course-wrapper">
      <goBack v-show="!hideHeader"></goBack>
      <img :class="['fixedImg', !showComment ? 'fromSmall' : '']" :src="titleData.pic" alt="" />
      <div :class="['nav-box flex-h fixedTab', hideHeader ? 'hideHeaderFixedTab' : '']" v-show="showTabs">
        <span @click="tabIndex = 1" class="flex1">
          <i>简介</i>
          <b v-show="tabIndex === 1"></b>
        </span>
        <span @click="tabIndex = 2" class="flex1">
          <i>目录</i>
          <b v-show="tabIndex === 2"></b>
        </span>
        <!-- <span @click="tabIndex = 3" class="flex1" v-show="hasQuestionAndAnswer">
          <i>问答</i>
          <b v-show="tabIndex === 3"></b>
        </span> -->
      </div>
      <scrollerEdit ref="scrollerBottom" lock-x @on-scroll="onScroll" @on-scroll-bottom="infinite" :bounce="false">
        <div class="content">
          <!-- <div class="title-box flex-h">
            <img class="left" :src="titleData.pic" alt />
            <div class="flex1 right">
              <h2>{{ titleData.commodityName }}</h2>
              <div class="btn flex-h">
                <span class="flex1 study" @click="goPlay(0)">开始学习</span>
                <span class="flex1 problem" @click="gotoputQuestions">提问</span>
              </div>
            </div>
          </div> -->
          <div class="titleBox">
            <h2>{{ titleData.commodityName }}</h2>
            <div class="btn flex-h">
              <span class="flex1 study" @click="goPlay(0)">开始学习</span>
              <span class="flex1 problem" v-show="showComment" @click="gotoputQuestions">提问</span>
              <span class="flex1 problem" v-show="!showComment" style="opacity:0"></span>
            </div>
          </div>
          <div class="nav-box flex-h" ref="tabOffestHeight">
            <span @click="tabIndex = 1" class="flex1">
              <i>简介</i>
              <b v-show="tabIndex === 1"></b>
            </span>
            <span @click="tabIndex = 2" class="flex1">
              <i>目录</i>
              <b v-show="tabIndex === 2"></b>
            </span>
            <!-- <span @click="tabIndex = 3" class="flex1" v-show="hasQuestionAndAnswer">
              <i>问答</i>
              <b v-show="tabIndex === 3"></b>
            </span> -->
          </div>
          <div class="content-box">
            <div class="list" v-show="tabIndex == 1">
              <div class="tabLeft" v-html="titleData.details"></div>
            </div>
            <div class="list" v-show="tabIndex == 2">
              <div class="mulu" v-for="(item, index) in lessonsVOList" :key="item.id" @click="goPlay(index)">
                <span class="title">
                  <i>0{{ index + 1 }}</i>
                  <b>{{ item.lessonTopic }}</b>
                </span>
                <span class="times">
                  <i>{{ new Date(item.teachingStartTime).format('yyyy-MM-dd hh:mm') + '-' + new Date(item.teachingEndTime).format('hh:mm') }}</i>
                </span>
              </div>
            </div>
            <!-- <div class="questionArea" v-show="tabIndex == 3">
              <div v-if="!noData">
                <div class="singleQuestion" v-for="(item, index) of qusAndAnswerList" :key="index" @click="handleIntoQuestionDetail(item.questionId)">
                  <div class="qusTip">
                    <div class="tip">回答了问题</div>
                    <div class="time">{{ item.answerList[0].createtime ? new Date(item.answerList[0].createtime).format('yyyy-MM-dd hh:mm') : '' }}</div>
                  </div>
                  <div class="questionTitle">{{ item.title }}</div>
                  <div class="contentArea">
                    <div class="topMsg">
                      <div class="left">
                        <div class="proAvatar"><img :src="professorInfo.avatar" alt="" /></div>
                        <div class="proName">{{ professorInfo.name }}</div>
                      </div>
                      <div class="right">
                      
                        <div class="isHelp">{{ item.answerList[0].helpCount == 0 ? '有帮助' : item.answerList[0].helpCount }}</div>
                      </div>
                    </div>
                    <div class="answer">{{ item.answerList[0].text }}</div>
                  </div>
                </div>
                <load-more :show-loading="showLoading" :bounce="false" :tip="tipmsg"></load-more>
              </div>
              <div v-else>
                <div class="noDataImage">
                  <img src="~/static/nothing/empty_article.png" alt="" />
                  <div class="describe">没有找到老师的回答</div>
                </div>
              </div>
            </div> -->
          </div>
          <div style="height:1rem"></div>
        </div>
      </scrollerEdit>
    </div>
  </div>
</template>
<script>
import { info, getProfessorQusAndAnsPage, professorInfo } from '~/api/identity'
import { LoadMore } from 'vux'
import scrollerEdit from '~/components/scrollerEdit'
import goBack from '~/components/goBack'
import { format } from '~/plugins/filter'
export default {
  components: {
    goBack,
    scrollerEdit,
    LoadMore,
  },
  data() {
    return {
      showComment: true,
      tabIndex: 1,
      titleData: {},
      showTabs: false,
      lessonsVOList: [],
      hasQuestionAndAnswer: true, // 是否有问答模块
      professionalParams: {
        pageNo: 1,
        pageSize: 10,
        pid: null,
      },
      qusAndAnswerList: [],
      totalPages: 0,
      showLoading: true,
      tipmsg: '加载更多',
      noData: true,
      hideHeader: false,
      professorInfo: {}, // 专家详情
    }
  },
  created() {},
  mounted: function() {
    this.$visit('VideoCourse/' + this.commonJs.GetUrlParam('id'))
    if (sessionStorage.getItem('fromplat')) {
      this.showComment = false
      this.hideHeader = true
    }
    this.tabsOffsetTop = this.$refs.tabOffestHeight.offsetTop - 40
    // this.commonJs.GetUrlParam('professorId')
    let professorId = this.commonJs.GetUrlParam('professorId') * 1
    if (professorId) {
      this.hasQuestionAndAnswer = true
      this.professionalParams.pid = professorId
      this.getProfessorInfo(professorId)
      this.getProfessorQusAndAnsPage()
    } else {
      this.hasQuestionAndAnswer = false
    }
    this.info()
  },
  methods: {
    confirmTips() {
      this.$vux.confirm.show({
        // 组件除show外的属性
        content: "<p style='text-align:center;'>该功能暂时仅限APP内使用，点击确定下载APP</p>",
        onCancel() {},
        onConfirm() {
          window.location = 'https://a.app.qq.com/o/simple.jsp?pkgname=com.sx985.am'
        },
      })
    },
    gotoputQuestions() {
      if (this.commonJs.GetUrlParam('share')) {
        this.confirmTips()
        return false
      }
      if (this.commonJs.GetUrlParam('mini_token')) {
        this.$router.push({
          path: 'putQuestions',
          query: {
            mini_token: this.commonJs.GetUrlParam('mini_token'),
          },
        })
      } else {
        this.commonJs.gopush('putQuestions')
      }
    },
    infinite() {
      if (this.tabIndex == 3) {
        if (this.professionalParams.pageNo < this.totalPages) {
          this.professionalParams.pageNo = this.professionalParams.pageNo + 1
          getProfessorQusAndAnsPage(this.professionalParams).then((res) => {
            if (res.code == '0') {
              let newArr = res.data.questionAnswerPageVO.list
              this.qusAndAnswerList = this.qusAndAnswerList.concat(newArr)
              const total = res.data.questionAnswerPageVO.total
              this.totalPages = Math.ceil(total / res.data.questionAnswerPageVO.pageSize)
            }
          })
        } else {
          this.showLoading = false
          this.tipmsg = '没有更多课程'
        }
      }
    },
    goPlay(index) {
      let obj = {
        order: index,
        coverImg: this.coverImg,
        viodeList: this.lessonsVOList,
      }
      sessionStorage.setItem('videoPlayList', JSON.stringify(obj))
      if (this.commonJs.GetUrlParam('mini_token')) {
        this.commonJs.gopush('videoPlay?id=' + this.commonJs.GetUrlParam('id') + '&order=' + index + '&mini_token=' + this.commonJs.GetUrlParam('mini_token'))
      } else {
        this.commonJs.gopush('videoPlay?id=' + this.commonJs.GetUrlParam('id') + '&order=' + index)
      }
    },
    info() {
      let obj = {
        id: this.commonJs.GetUrlParam('id'),
      }
      info(obj)
        .then((res) => {
          this.titleData = res.data.commodityInfoByCidVO
          this.lessonsVOList = res.data.lessonsVOList
          this.coverImg = res.data.commodityInfoByCidVO.pic
        })
        .catch((err) => {})
    },
    onScroll(e) {
      if (sessionStorage.getItem('fromplat')) {
        this.showTabs = false
        return
      }
      if (e.top > this.tabsOffsetTop || e.top == this.tabsOffsetTop) {
        this.showTabs = true
      } else {
        this.showTabs = false
      }
    },
    getProfessorQusAndAnsPage() {
      getProfessorQusAndAnsPage(this.professionalParams).then((res) => {
        if (res.code == 0) {
          const data = res.data.questionAnswerPageVO
          this.qusAndAnswerList = data.list ? data.list : []
          if (this.qusAndAnswerList.length == 0) {
            this.noData = true
          } else {
            this.noData = false
          }
          const total = res.data.questionAnswerPageVO.total
          this.totalPages = Math.ceil(total / res.data.questionAnswerPageVO.pageSize)
        }
      })
    },
    // 获取专家详情
    getProfessorInfo(id) {
      professorInfo({ agencyUserId: id }).then((res) => {
        if (res.code == 0) {
          this.professorInfo = res.data
        }
      })
    },
    // handleIntoQuestionDetail(id) {
    //   if (this.commonJs.GetUrlParam('share')) {
    //     this.confirmTips()
    //     return false
    //   }
    //   if (this.commonJs.GetUrlParam('mini_token')) {
    //     this.$router.push({
    //       path: './questionDetail',
    //       query: {
    //         qid: id,
    //         mini_token: this.commonJs.GetUrlParam('mini_token')
    //       }
    //     })
    //   } else {
    //     this.$router.push({
    //       path: './questionDetail',
    //       query: {
    //         qid: id
    //       }
    //     })
    //   }
    // }
  },
}
</script>

<style scoped lang="less">
.main {
  width: 100%;
  height: 100vh;
  font-size: 0.3rem;
}
.tabLeft {
  /deep/img {
    max-width: 100%;
    height: auto;
  }
}
.video-course-wrapper {
  width: 100%;
  height: 100vh;
  background: #fff;
  .fixedImg {
    width: 100%;
    height: 3.6rem;
    position: fixed;
    left: 0;
    top: 0.8rem;
    background: url('~/static/header.png') no-repeat;
    background-size: 100% 100%;
  }
  .fromSmall {
    top: 0;
  }
  .titleBox {
    width: 100%;
    min-height: 2rem;
    background: #fff;
    border-top-left-radius: 0.3rem;
    border-top-right-radius: 0.3rem;
    padding: 0.3rem;
    box-sizing: border-box;
    margin-top: 3.4rem;
    border-bottom: 0.16rem solid rgba(247, 247, 250, 1);
    h2 {
      font-size: 0.36rem;
      font-weight: 600;
      color: rgba(34, 34, 34, 1);
      line-height: 0.58rem;
    }
    .btn {
      width: 100%;
      height: auto;
      margin-top: 0.6rem;
      span {
        height: 0.9rem;
        border-radius: 0.45rem;
        font-size: 0.32rem;
        font-weight: 600;
        color: rgba(255, 255, 255, 1);
        text-align: center;
        line-height: 0.9rem;
      }
      .study {
        background: @mainColor;
        margin-right: 0.3rem;
      }
      .problem {
        background: #ffd63d;
      }
    }
  }
}
.content {
  width: 100%;
  overflow: hidden;
  .title-box {
    width: 100%;
    height: 2.4rem;
    padding: 0 0.3rem;
    margin: 0.4rem auto;
    img {
      border-radius: 0.12rem;
      overflow: hidden;
      width: 3.2rem;
      height: 2.4rem;
      background: url('~@/static/header.png') no-repeat;
      background-size: 100% 100%;
    }
    .right {
      padding-left: 0.3rem;
      box-sizing: border-box;
      h2 {
        font-size: 0.32rem;
        font-family: 'PingFangSC-Semibold', PingFangSC;
        font-weight: 600;
        color: rgba(34, 34, 34, 1);
        line-height: 0.4rem;
        height: 0.8rem;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }
      .btn {
        width: 100%;
        height: 0.64rem;
        margin-top: 0.9rem;
        span {
          height: 0.64rem;
          border-radius: 0.32rem;
          text-align: center;
          line-height: 0.64rem;
          font-size: 0.28rem;
          font-family: 'PingFangSC-Semibold', PingFangSC;
          font-weight: 600;
        }
        span:nth-of-type(1) {
          margin-right: 0.2rem;
          background: @assistColor;
          color: rgba(255, 255, 255, 1);
        }
        span:nth-of-type(2) {
          background: @secondColor;
          color: rgba(255, 255, 255, 1);
        }
      }
    }
  }

  .content-box {
    width: 100%;
    height: auto;
    background: #fff;
    border-top-left-radius: 0.1rem;
    border-top-right-radius: 0.1rem;
    padding: 0.3rem 0;
    box-sizing: border-box;
    h3 {
      padding: 0 0.3rem;
      box-sizing: border-box;
      font-size: 0.36rem;
      font-family: 'PingFangSC-Semibold', PingFangSC;
      font-weight: 600;
      color: rgba(34, 34, 34, 1);
      line-height: 0.5rem;
    }
    .list {
      width: 100%;
      height: auto;
      padding: 0 0.3rem;
      box-sizing: border-box;
      min-height: 100vh;
      .mulu {
        width: 6.9rem;
        padding: 0.3rem;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 0.02rem 0.1rem 0px rgba(153, 153, 153, 0.2);
        border-radius: 0.1rem;
        margin: 0 auto 0.4rem;
        .title {
          display: block;
          i {
            display: inline-block;
            width: 0.4rem;
            margin-right: 0.1rem;
          }
          i,
          b {
            font-size: 0.3rem;
            font-family: 'PingFangSC-Semibold', PingFangSC;
            font-weight: 600;
            color: rgba(34, 34, 34, 1);
            line-height: 0.4rem;
          }
        }
        .times {
          display: block;
          padding-left: 0.5rem;
          box-sizing: border-box;
          font-size: 0.26rem;
          font-family: 'SFCompactText-Regular', SFCompactText;
          font-weight: 400;
          color: rgba(199, 199, 199, 1);
          margin-top: 0.2rem;
        }
      }
    }
    .questionArea {
      padding: 0 0.32rem;
      .singleQuestion {
        padding: 0.42rem 0 0.4rem;
        border-bottom: 1px solid #e5e8ed;
        .qusTip {
          color: #999;
          font-size: 0.26rem;
          line-height: 0.44rem;
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 0.16rem;
        }
        .questionTitle {
          color: #222;
          font-size: 0.3rem;
          line-height: 0.48rem;
          font-weight: bold;
          margin-bottom: 0.16rem;
        }
        .contentArea {
          width: 100%;
          max-height: 1.94rem;
          padding: 0.24rem;
          background: #f7f7fa;
          .topMsg {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 0.16rem;
            .left {
              display: flex;
              justify-content: space-between;
              align-items: center;
              .proAvatar {
                width: 0.5rem;
                height: 0.5rem;
                margin-right: 0.24rem;
                img {
                  width: 100%;
                  height: 100%;
                  border-radius: 50%;
                }
              }
              .proName {
                color: #222;
                font-size: 0.28rem;
                font-weight: bold;
              }
            }
            .right {
              display: flex;
              justify-content: space-between;
              align-items: center;
              .isLiked {
                width: 0.23rem;
                height: 0.24rem;
                margin-right: 0.13rem;
              }
              .isHelp {
                color: #c7c7c7;
                font-size: 0.24rem;
              }
            }
          }
          .answer {
            color: #999;
            font-size: 0.26rem;
            line-height: 0.4rem;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            -webkit-box-orient: vertical;
          }
        }
      }
      .singleQuestion:last-child {
        border-bottom: none;
      }
      .noDataImage {
        text-align: center;
        padding-top: 0.4rem;
        img {
          width: 2.4rem;
          height: 2.4rem;
          margin-bottom: 0.24rem;
        }
        .describe {
          color: #999;
          font-size: 0.28rem;
          line-height: 0.4rem;
          margin-bottom: 0.2rem;
        }
        .fixed-btn {
          width: 2.6rem;
          height: 0.88rem;
          background: @assistColor;
          box-shadow: 0px 0.08rem 0.2rem 0px rgba(128, 213, 102, 0.3);
          border-radius: 0.44rem;
          text-align: center;
          line-height: 0.88rem;
          font-size: 0.3rem;
          font-weight: 600;
          margin: 0 auto;
          color: rgba(255, 255, 255, 1);
        }
      }
    }
  }
}
.nav-box {
  width: 100%;
  height: 1rem;
  background: #fff;
  border-bottom: solid 0.01rem rgba(229, 232, 237, 1);
  span {
    height: 1rem;
    overflow: hidden;
    i,
    b {
      display: block;
    }
    i {
      text-align: center;
      font-size: 0.3rem;
      font-family: 'PingFangSC-Semibold', PingFangSC;
      font-weight: 600;
      color: rgba(34, 34, 34, 1);
      height: 0.4rem;
      margin-top: 0.2rem;
    }
    b {
      width: 0.4rem;
      height: 0.08rem;
      background: @secondColor;
      border-radius: 0.04rem;
      margin: 0.1rem auto 0;
    }
  }
}
.fixedTab {
  position: fixed;
  left: 0;
  top: 0.78rem;
  z-index: 102;
}
.hideHeaderFixedTab {
  top: 0;
}
</style>
